<!--
- Author:  LiShibin.
- Date:    2017/11/10 0010.
- File:    我的优惠券列表.
-->
<template>
  <div class="Web_Box">
    <div class="">
      <div class="ency_tab bg_fff">
        <div class="Tabs2">
          <ul>
            <li :class="{'on': couponType == $dictionary.couponType.buy}" @click="switchCouponType($dictionary.couponType.buy)">购买优惠券</li>
            <li :class="{'on': couponType == $dictionary.couponType.rent}" @click="switchCouponType($dictionary.couponType.rent)">租赁优惠券</li>
          </ul>
        </div>
      </div>
      <div class="ProList">
        <div class="coupon" v-for="coupon in couponList.data">
          <div class="couponlist f-cb">
            <div class="fl">
              <p class="c_shop"><i class="iconfont icon-dianpu1"></i>{{coupon.store_name}}</p>
              <p class="c_class">类型：{{coupon.voucher_type | couponTypeTxt}}</p>
              <p class="c_time">{{coupon.voucher_start_date | timestampToDate('yyyy.MM.dd')}}-{{coupon.voucher_end_date | timestampToDate('yyyy.MM.dd')}}</p>
            </div>
            <div class="fr mt10 pr20">
              <p class="c_price">￥<span>{{coupon.voucher_price}}</span></p>
              <p class="c_money2 tc">{{coupon.voucher_limit | couponUseTxt}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <empty-data :show="couponList.requested && couponList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        couponList: {requested: false, data: []},
        couponType: this.$route.query.type || this.$dictionary.couponType.buy
      }
    },
    components: {},
    created() {
      this.getCouponList()
    },
    methods: {
      switchCouponType(type) {
        this.couponType = type
        this.couponList = {requested: false, data: []}
        this.getCouponList()
      },
      getCouponList() {
        this.$request.getMemberCouponList(this.couponType).then(data => {
          this.couponList.data = data
        }).finally(() => {
          this.couponList.requested = true
        })
      }
    }
  }
</script>

<style>

</style>